﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #main {
            width: 210px;
            background-color: black;
            float: left;
            overflow: auto;
        }

            #main > div {
                height: 20px;
                width: 20px;
                float: left;
                border-left: 1px solid #000;
                border-bottom: 1px solid #000;
            }

        #ygl {
            width: 126px;
            background-color: #363636;
            text-align:center;
            color:white;
            overflow: auto;
        }

            #ygl > div {
                height: 20px;
                width: 20px;
                float: left;
                border-left: 1px solid #363636;
                border-bottom: 1px solid #363636;
            }
    </style>
    <script>
        var height = 18;
        var width = 10;
        var blocks = [];
        var currBlock = {};
        var trimer;
        var isOver = false;
        var yWidth = 6;      //预告栏宽度
        var isYg = false;    //是否是预告方块
        var yblocks = [];    //预告方块集合
        var lastCurr = {};   //预告方块
        var score = 0;       //分数   



        function showBg() {
            //#main
            var mydiv = document.getElementById("main");
            for (var i = 0; i < height; i++) {
                for (var j = 0; j < width; j++) {
                    var elm = document.createElement("div");
                    mydiv.appendChild(elm);
                    var p = xy(j, i);
                    blocks[p] = { x: j, y: i, s: 0, el: elm, color: "" };
                }
            }
            //#ygl
            mydiv = document.getElementById("ygl");
            for (var y = 0; y < height; y++) {
                for (var x = 0; x < yWidth; x++) {
                    var elm = document.createElement("div");
                    mydiv.appendChild(elm);
                    var p = yglxy(x, y);
                    yblocks[p] = { x: x, y: y, el: elm, color: "" };
                }
            }
            //var elm = document.createElement("div");
            //elm.style.height = 20 * height / 2 + +"px";
            //elm.style.width = 20 * yWidth + "px";
            //mydiv.appendChild(elm);
        }

        function newBlock() {
            var type, color;
            if (typeof (lastCurr.ygType) == "undefined") {
                type = randomBlock();
                color = getColor();
            }
                
            else {
                type = lastCurr.ygType;
                color = lastCurr.color;
            }
               

            var pos = testPos(type, 4, 0);
            if (pos != false) {
                currBlock.x = 4;
                currBlock.y = 0;
                currBlock.type = type;
                currBlock.color = color;
                setCurr(pos, currBlock.color);

                //生成下一个预告方块
               
                ygBlock();
            }
        }

        function ygBlock() {
            clearYgFk();

            lastCurr.ygType = randomBlock();
            lastCurr.color = getColor();
            var x = 2;
            var y = 3;

            isYg = true;
            var pos = testPos(lastCurr.ygType, x, y);
            if (pos != false) {
                for (var i = 0; i < pos.length; i++) {
                    var p = yglxy(pos[i].x, pos[i].y);
                    yblocks[p].el.style.background = lastCurr.color;

                }

                isYg = false;
            }
        }

        function clearYgFk() {
            for (var i = 0; i < blocks.length / 2; i++) {
                yblocks[i].el.style.background = "";
            }
        }

        function setCurr(pos, color) {
            for (var i = 0; i < pos.length; i++) {
                var p = xy(pos[i].x, pos[i].y);
                if (p > 0 && p < blocks.length) {
                    blocks[p].s = 0;
                    blocks[p].color = color;
                }
            }

        }

        function getColor() {
            var num = random(0, 5);
            var arry = ["#00868B", "#008B00", "#20B2AA", "#8B3A3A", "#FF1493"];

            return arry[num];
        }



        function randomBlock() {
            return random(1, 8);
        }

        function random(b, e) {
            return Math.floor(Math.random() * (e - b)) + b;
        }

        function xy(x, y) {
            return y * width + x;
        }

        function yglxy(x, y) {
            return y * yWidth + x;
        }




        function testPos(type, x, y) {
            var tmp = [];
            switch (type) {
                case 1:
                    tmp[0] = { x: x - 1, y: y - 1 };
                    tmp[1] = { x: x - 1, y: y };
                    tmp[2] = { x: x, y: y };
                    tmp[3] = { x: x + 1, y: y };
                    break
                case 2:
                    tmp[0] = { x: x, y: y - 1 };
                    tmp[1] = { x: x - 1, y: y };
                    tmp[2] = { x: x, y: y };
                    tmp[3] = { x: x + 1, y: y };
                    break
                case 3:
                    tmp[0] = { x: x - 2, y: y };
                    tmp[1] = { x: x - 1, y: y };
                    tmp[2] = { x: x, y: y };
                    tmp[3] = { x: x + 1, y: y };
                    break
                case 4:
                    tmp[0] = { x: x + 1, y: y - 1 };
                    tmp[1] = { x: x, y: y - 1 };
                    tmp[2] = { x: x, y: y };
                    tmp[3] = { x: x + 1, y: y };
                    break
                case 5:
                    tmp[0] = { x: x + 1, y: y - 1 };
                    tmp[1] = { x: x, y: y - 1 };
                    tmp[2] = { x: x, y: y };
                    tmp[3] = { x: x - 1, y: y };
                    break
                case 6:
                    tmp[0] = { x: x - 1, y: y - 1 };
                    tmp[1] = { x: x, y: y - 1 };
                    tmp[2] = { x: x, y: y };
                    tmp[3] = { x: x + 1, y: y };
                    break
                case 7:
                    tmp[0] = { x: x - 1, y: y };
                    tmp[1] = { x: x, y: y };
                    tmp[2] = { x: x + 1, y: y };
                    tmp[3] = { x: x + 1, y: y - 1 };
                    break
                case 11:
                    tmp[0] = { x: x + 1, y: y - 1 };
                    tmp[1] = { x: x, y: y - 1 };
                    tmp[2] = { x: x, y: y };
                    tmp[3] = { x: x, y: y + 1 };
                    break
                case 12:
                    tmp[0] = { x: x - 1, y: y };
                    tmp[1] = { x: x, y: y };
                    tmp[2] = { x: x + 1, y: y };
                    tmp[3] = { x: x + 1, y: y + 1 };
                    break
                case 13:
                    tmp[0] = { x: x, y: y - 1 };
                    tmp[1] = { x: x, y: y };
                    tmp[2] = { x: x, y: y + 1 };
                    tmp[3] = { x: x - 1, y: y + 1 };
                    break
                case 21:
                    tmp[0] = { x: x, y: y - 1 };
                    tmp[1] = { x: x, y: y };
                    tmp[2] = { x: x + 1, y: y };
                    tmp[3] = { x: x, y: y + 1 };
                    break
                case 22:
                    tmp[0] = { x: x - 1, y: y };
                    tmp[1] = { x: x, y: y };
                    tmp[2] = { x: x + 1, y: y };
                    tmp[3] = { x: x, y: y + 1 };
                    break
                case 23:
                    tmp[0] = { x: x, y: y - 1 };
                    tmp[1] = { x: x, y: y };
                    tmp[2] = { x: x - 1, y: y };
                    tmp[3] = { x: x, y: y + 1 };
                    break
                case 31:
                    tmp[0] = { x: x, y: y - 1 };
                    tmp[1] = { x: x, y: y };
                    tmp[2] = { x: x, y: y + 1 };
                    tmp[3] = { x: x, y: y + 2 };
                    break
                case 51:
                    tmp[0] = { x: x, y: y - 1 };
                    tmp[1] = { x: x, y: y };
                    tmp[2] = { x: x + 1, y: y };
                    tmp[3] = { x: x + 1, y: y + 1 };
                    break
                case 61:
                    tmp[0] = { x: x, y: y + 1 };
                    tmp[1] = { x: x + 1, y: y };
                    tmp[2] = { x: x, y: y };
                    tmp[3] = { x: x + 1, y: y - 1 };
                    break
                case 71:
                    tmp[0] = { x: x, y: y - 1 };
                    tmp[1] = { x: x, y: y };
                    tmp[2] = { x: x, y: y + 1 };
                    tmp[3] = { x: x + 1, y: y + 1 };
                    break
                case 72:
                    tmp[0] = { x: x - 1, y: y + 1 };
                    tmp[1] = { x: x - 1, y: y };
                    tmp[2] = { x: x, y: y };
                    tmp[3] = { x: x + 1, y: y };
                    break
                case 73:
                    tmp[0] = { x: x - 1, y: y - 1 };
                    tmp[1] = { x: x, y: y - 1 };
                    tmp[2] = { x: x, y: y };
                    tmp[3] = { x: x, y: y + 1 };
                    break
            }

            if (isYg)
                return tmp;

            for (var i = 0; i < tmp.length; i++) {
                var p = tmp[i];
                if (p.y < 0)
                    continue;
                else if (p.y >= height)
                    return false;
                else if (p.x < 0 || p.x >= width)
                    return false
                else if (blocks[xy(p.x, p.y)].s > 0)
                    return false;
            }
            return tmp;
        }

        function move(type) {
            var x, y;
            var t = currBlock.type;
            switch (type) {
                case 37:  //左
                    x = currBlock.x - 1;
                    y = currBlock.y;
                    break;
                case 38:  //上
                    x = currBlock.x;
                    y = currBlock.y;
                    t = changeBlock(currBlock.type);
                    break;
                case 39:  //右
                    x = currBlock.x + 1;
                    y = currBlock.y;
                    break;
                case 40:   //下
                    x = currBlock.x;
                    y = currBlock.y + 1;
                    break;
                case 32:   //空格（下降到底）
                    x = currBlock.x;
                    y = currBlock.y;
                    for (var i = 0; i < height; i++) {
                        var downPos = testPos(t, x, y);
                        if (downPos !== false)
                            y++;
                        else
                            break;
                    }
                    break;
            }
            if (type == 32) {
                y--;
            }
            var newPos = testPos(t, x, y)

            if (newPos != false) {
                reset();
                currBlock.x = x;
                currBlock.y = y;
                currBlock.type = t;
                setCurr(newPos, currBlock.color);
                if (type == 40) {
                    step();
                }
            } else if (type == 40 ) {
                fixed();
                currBlock.x = 4;
                currBlock.y = 0;
                currBlock.color = getColor();

                newPos = testPos(randomBlock(), currBlock.x, currBlock.y);
                if (newPos == false) {
                    isOver = true;
                    alert("游戏结束");
                } else {
                    rmoveBlack();
                    newBlock();
                }
            } 

            paint();
        }

        function changeBlock(type) {
            var t;

            if (type == 4)
                return type;

            switch (type) {
                case 1:
                    t = 11;
                    break;
                case 11:
                    t = 12;
                    break;
                case 12:
                    t = 13;
                    break;
                case 13:
                    t = 1;
                    break;
                case 2:
                    t = 21;
                    break;
                case 21:
                    t = 22;
                    break;
                case 22:
                    t = 23;
                    break;
                case 23:
                    t = 2;
                    break;
                case 3:
                    t = 31;
                    break;
                case 31:
                    t = 3;
                    break;
                case 5:
                    t = 51;
                    break;
                case 51:
                    t = 5;
                    break;
                case 6:
                    t = 61;
                    break;
                case 61:
                    t = 6;
                    break;
                case 7:
                    t = 71;
                    break;
                case 71:
                    t = 72;
                    break;
                case 72:
                    t = 73;
                    break;
                case 73:
                    t = 7;
                    break;
            }

            return t;
        }

        function paint() {
            for (var i = 0; i < blocks.length; i++) {
                blocks[i].el.style.background = blocks[i].color;
            }
        }

        function rmoveBlack() {

            for (var y = 0; y < height; y++) {
                var isClear = true;
                for (var x = 0; x < width; x++) {
                    var p = xy(x, y);
                    if (blocks[p].s != 1) {
                        isClear = false;
                    }
                }
                if (isClear) {
                    for (var i = y; i >= 0; i--) {
                        for (var j = width - 1; j >= 0; j--) {
                            var up = xy(j, i - 1);
                            var now = xy(j, i);
                            if (i == 0) {
                                blocks[now].color = "";
                                blocks[now].s = -1;
                            } else {
                                blocks[now].color = blocks[up].color;
                                blocks[now].s = blocks[up].s;
                            }
                        }

                    }
                    //分数增加
                    score++;
                    showScore();
                    paint();
                }
            }


        }

        function showScore() {
            var x = 1;
            var y = 14;
            var y1 = 10;
            var level = parseInt(score / 10);


            var p1 = yglxy(x, y);
            var p2 = yglxy(x + 1, y);
            var p3 = yglxy(x + 2, y);
            var p4 = yglxy(x + 3, y);
            yblocks[p1].el.innerText = "分";
            yblocks[p2].el.innerText = "数";
            yblocks[p3].el.innerText = "：";
            yblocks[p4].el.innerText = score;

            var l1 = yglxy(x, y1);
            var l2 = yglxy(x + 1, y1);
            var l3 = yglxy(x + 2, y1);
            var l4 = yglxy(x + 3, y1);
            yblocks[l1].el.innerText = "等";
            yblocks[l2].el.innerText = "级";
            yblocks[l3].el.innerText = "：";
            yblocks[l4].el.innerText = level;

        }

        function reset() {
            for (var i = 0; i < blocks.length; i++) {
                if (blocks[i].s == 0) {
                    blocks[i].s = -1;
                    blocks[i].color = "";
                }
            }
        }

        function fixed() {
            for (var i = 0; i < blocks.length; i++) {
                if (blocks[i].s == 0) {
                    blocks[i].s = 1;
                }
            }
        }

        function step() {
            var level = parseInt(score / 10);

            if (trimer) {
                clearInterval(trimer);
            }
            trimer = setInterval(function () {
                move(40);
                if (isOver)
                    clearInterval(trimer);
            }, 1000 - 200 * level)
        }
        function init() {
            document.onkeydown = function (event) {
                var e = event || window.event || arguments.callee.caller.arguments[0];
                var key = e.keyCode;
                if (key >= 32 && key <= 40) {
                    move(key);
                }

            };

            showBg();
            showScore();
            newBlock();
            step();

        }

    </script>
</head>
<body onload="init()">
    <div id="main">

    </div>
    <div id="ygl"></div>
</body>
</html>